<template>
<div>
    <p v-if="attention_dynamic.length == 0" style="margin-top: 2rem;color: #212121;font-size: .56rem;">没有更多数据喔~</p>
    <div class="scroll-list-wrap" :style="{height:getWindowHeight+'px'}">
        <cube-scroll
          ref="scrolls"
          :data="attention_dynamic"
          :options="options"
          @pulling-up="onPullingUp">
              <div class="wrapper">
                <div class="box" v-if="attention_dynamic.length !== 0" v-for="(item,index) in attention_dynamic">
                      <div class="left">
                        <img :src="item.logo" alt="">
                      </div>
                      <div class="right border-bottom-1px">
                        <h3 class="shop_name">{{item.name}}</h3>
                        <p class="info_p" v-show="item.slice_show">{{item.slice_content}}</p>
                        <p class="info_p" v-show="item.content_show">{{item.content}}</p>

                        <a href="javascript:;" class="quanwen" @click="handleFold(index)" v-show="item.slice_show && item.is_slice">全文</a>
                        <a href="javascript:;" class="quanwen" @click="handleFold(index)" v-show="item.content_show && item.is_slice">收起</a>

                        <!-- <a href="javascript:;" class="quanwen" @click="handleFold(false)" v-show="maxLen < haystack.length">全文</a>
                        <a href="javascript:;" class="quanwen" @click="handleFold(true)" v-show="maxLen == haystack.length">收起</a> -->
                        <div class="img_box">
                          <img :src="img" alt="" v-for="(img,i) in item.thumb" :key="i" @click="handleImgsClick(item.thumb,i)">
                        </div>
                      </div>
                </div>
              </div>
          </cube-scroll>
      </div>
</div>
</template>
<script>
export default {
  data() {
    return {
      initialIndex: 0,
      screenWidth: document.body.clientWidth, // 屏幕尺寸
      maxLen: 43,
      maxLen_v:43,
      attention_dynamic:[],
      page:1,
      pullUpLoad: true,
      pullUpLoadThreshold: 0,
      pullUpLoadMoreTxt: '上拉加载更多',
      pullUpLoadNoMoreTxt: '没有更多数据喔~'
    }
  },
  methods: {
    handleImgsClick(thumb,index) {
      this.initialIndex = index
      const params = {
        $props: {
          imgs: thumb,
          initialIndex: 'initialIndex', // 响应式数据的key名
          loop: false
        },
        $events: {
          change: (i) => {
            // 必须更新 initialIndex
            this.initialIndex = i
          }
        }
      }
      this.$createImagePreview({ ...params
      }).show()
    },

    isEmpty(obj) {
        // 本身为空直接返回true
        if (obj == null) return true;
        // 然后可以根据长度判断，在低版本的ie浏览器中无法这样判断。
        if (obj.length > 0)    return false;
        if (obj.length === 0)  return true;
        //最后通过属性长度判断。
        for (var key in obj) {
            if (hasOwnProperty.call(obj, key)) return false;
        }
        return true;
    },
    //查看全部收起功能
    handleFold(index) {
      this.attention_dynamic[index].slice_show = !this.attention_dynamic[index].slice_show;
      this.attention_dynamic[index].content_show = !this.attention_dynamic[index].content_show;
    },
     //动态列表
     getAttention_dynamic:function(){
         let that = this;
         const toast = that.$createToast({
             time: 5000,
             txt: ''
           })
           toast.show()
         that.$axios.post("/fang/personal/attention_dynamic",that.$qs.stringify({
                 access_token:that.$store.state._token01,
                 page:that.page
             }))
             .then(function (response) {
                  toast.hide();
                 let res = response.data;
                 console.log(res);
                 if(res.status == 1){
                     let attention_status = that.isEmpty(res.data.data);
                     if(!attention_status){
                         that.page += 1;
                         res.data.data.forEach(function(val,index){
                             if(val.content.length > that.maxLen){
                               val.slice_content = val.content.slice(0, that.maxLen) + "...";
                               val.is_slice = true;
                               val.slice_show = true;
                               val.content_show = false;
                             }else{
                               val.slice_content = val.content;
                               val.is_slice = false;
                               val.slice_show = true;
                               val.content_show = false;
                             }
                             that.attention_dynamic.push(val);
                             console.log(that.attention_dynamic);
                         });
                     }else{
                         // 如果没有新数据
                         that.$refs.scrolls.forceUpdate();
                     }

                     // that.status = status;
                 }else if (res.status == -1) {
                     that.noLogin();
                 }else{
                     that.toast = that.$createToast({
                       txt: res.msg,
                       type: 'txt'
                     })
                     that.toast.show()
                 }
             })
             .catch(function (error) {
                 console.log(error);
                 that.toast = that.$createToast({
                   txt: error.toString(),
                   type: 'txt'
                 })
                 that.toast.show()
         });
     },
     onPullingUp() {
         this.getAttention_dynamic();
       // 更新数据
     },
  },
  computed: {
      content() {
        var maxLen = this.maxLen;
        var haystack = this.dynamic.content.toString();
        return haystack.length > maxLen ? haystack.slice(0, maxLen) + "..." : haystack;
      },
      options() {
        return {
            pullUpLoad: this.pullUpLoadObj,
            scrollbar: false
        }
      },
       getWindowHeight(){
         return document.documentElement.clientHeight || document.body.clientHeight;
     },
     //上拉配置
     pullUpLoadObj: function() {
       return this.pullUpLoad ? {
         threshold: parseInt(this.pullUpLoadThreshold),
         txt: {
           more: this.pullUpLoadMoreTxt,
           noMore: this.pullUpLoadNoMoreTxt
         }
       } : false
     }
  },
  mounted() {
      const that = this;
      //获取屏幕的宽度
      window.onresize = () => {
        return (() => {
            window.screenWidth = document.body.clientWidth;
            that.screenWidth = window.screenWidth;
          })();
      }
      if(that.screenWidth && that.screenWidth == 320){
          that.maxLen_v = 37;
          that.maxLen = 37;
      }
      this.getAttention_dynamic();

  },
  activated:function(){
      //使用keep-alive以后进入页面只会触发activated
      // this.getAttention_dynamic();
  },
}
</script>
<style scoped>
.box {
  position: relative;
  margin-top: .52rem;
}

.box .left {
  width: 2.04rem;
  height: 2.04rem;
  border-radius: 50%;
  position: absolute;
  left: .64rem;
}

.box .left img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.box .right {
  margin-left: 3rem;
  text-align: left;
  padding-right: 1.1rem;
  padding-bottom: .4rem;
}

.box .right .shop_name {
  font-size: .64rem;
  color: #3D3D3D;
  font-weight: 600;
  margin: 0 0 .26rem 0;
  padding-top: .16rem;
}

.box .right .info_p {
  font-size: .48rem;
  color: #3D3D3D;
  margin-bottom: .32rem;
  line-height: .68rem;
  word-wrap: break-word;
  word-break: break-all;
}

.box .right .img_box {
  overflow: hidden;
  font-size: 0;
}

.box .right .img_box img {
  display: inline-block;
  width: 3.2rem;
  height: 3.16rem;
  margin-right: .36rem;
  margin-bottom: .36rem;
  border-radius: .1rem;
}

.box .right .quanwen {
  display: inline-block;
  color: #1CB69F;
  margin-bottom: .2rem;
}
.scroll-list-wrap{
    position: fixed;
    top: 1.76rem;
    left: 0;
}
</style>
<style lang="stylus" rel="stylesheet/stylus">
  .scroll-list-wrap
    border:none !important
.cube-image-preview .cube-popup-mask
        opacity: 1;
</style>
